<template>
	<div class="bglayout">
		<img class="topImgLayout" src="../assets/bnaner.png" />
		<div class="itembglayout">
			<template v-for="item in items">
				<label class="itemlayout" @click="itemClick(item)">{{item}}</label>
			</template>
		</div>
		<table border="1" style="background-color: red;width: 100%;">
			<td>row 1, cell 1</td>
			<td>row 1, cell 1</td>
			<td>row 1, cell 1</td>
			<td>row 1, cell 1</td>
			<td>row 1, cell 1</td>
		</table>
		<div class="submitLayout" @click="submitClick"></div>
	</div>
</template>

<script>
	export default {
		name: "HelloWorld",
		props: {
			msg: String,
		},
		data() {
			return {
				title: "亲，新的活动来了，come!",
				items: ["1号楼", "2号楼", "3号楼", "4号楼", "5号楼", "6号楼", "7号楼", "8号楼"]
			};
		},
		created() {
			this.forbidIosScale();
		},
		methods: {
			submitClick() {
				//直接跳转
				this.$router.push('detail');
			},
			/**
			 * 禁止ios缩放
			 */
			forbidIosScale() {
				document.addEventListener("touchstart", function(event) {
					if (event.touches.length > 1) {
						event.preventDefault();
					}
				});
				var lastTouchEnd = 0;
				document.addEventListener(
					"touchend",
					function(event) {
						var now = new Date().getTime();
						if (now - lastTouchEnd <= 300) {
							event.preventDefault();
						}
						lastTouchEnd = now;
					},
					false
				);
			},
			itemClick(e) {
				alert(e)
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.bglayout {
		background-image: url("../assets/bg.png");
		background-size: cover;
		width: 100%;
	}

	.topImgLayout {
		width: 100%;
	}

	.itembglayout {
		background-color: #ffffff;
		flex-direction: row;
		display: flex;
		width: 100%;
		max-width: 100%;
		flex-flow: row wrap;
		border: #999999 solid 1px;
		border-radius: 20px;
		padding-bottom: 20px;
		margin-top: 10px;
		margin-bottom: 100px;
	}

	.itemlayout {
		background-color: #f2f2f2;
		color: #333333;
		font-size: 20px;
		border-radius: 10px;
		padding: 10px 20px;
		border: 1px solid #e5e5e5;
		margin-left: 30px;
		margin-top: 20px;
	}

	.submitLayout {
		background-image: url("../assets/submitBtn.png");
		width: 265px;
		height: 3.75rem;
		margin-bottom: 40px;
		border: none;
		background-size: cover;
		margin: 0 auto;
		margin-top: 30px;
	}
</style>
